If you’re like Scotty then you build your entire design in Photoshop first, and worry about the HTML and other stuff later. For those unfamiliar with the techniques involved, or those wanting some inside tips, here’s our latest Photoshop tutorial:
Ok, so now you have an entire design ready to be turned into HTML. Starting with a flat image (just one big image), it’s time to cut it up into multiple images, or slices. This way we can add some user activity – such as mouse-over effects, creating links, and animation, as well as many other amazing features. But anyway, when you slice an image you’re actually taking that image and then creating additional images: think of it as a finished puzzle and each individual image slice as a piece.
The size and dimension of each slice, as well as the number of slices is all up to you. The main objects that I like to keep as separate slices are the title and each individual navigation item (also known as a link). It’s also a good idea to slice up high density areas of your image (where a lot of color and activity goes on). Now don’t get too carried away with over slicing (such as creating 500 individual slices all 1 pixel in width), because too much can make things even more confusing, however there is no limit (at least I haven’t hit a limit) to how many slices you can have. So now that you know a little bit about slices, it’s time to actually slice it up!
While in Photoshop (only Photoshop 7: if you’re using an earlier version you more then likely have to go to ImageReady to slice) open up your design and press K to select the ‘slice tool’. Click and drag out a box over your image to create a blue box with a number in the corner (this number is the slice number), this box is actually your second slice since the original image as one piece would be considered one slice. A handy shortcut to know while using slices is pressing CTRL+H key, this will Hide and then Show your slices each time it's pressed.
Once you have created all your slices, select the other slice tool (buried under the original). This is called the ‘Slice Select Tool’. Use this to select and modify each slice (size, attributes), you can also double click any slice to set linking URLs & other miscellaneous details (I usually save off on setting the URLs and such for the next step, mostly because I prefer the quicker interface ImageReady provides, rather then the annoying popup Photoshop uses).
Now it’s time to take our sliced up image and put it in HTML format; and rather than hand-coding this step, we will use ImageReady’s exportation method. First press the ‘Jump to ImageReady’ button (located at the bottom of the toolbar). Although you can export from within Photoshop, I would like you to get a feel for ImageReady so you’re ready to use it for my future articles.
In ImageReady you can perform additional functions such as mouseovers and animations (my next article will get into this). But for now, simply click File > Save For Web, select an optimization (graphic quality levels, reflects file size), then save as layout.html (or whatever you want) in its own folder (make a new one or use one of those empty ‘New Folders’ you have laying around on your desktop).
This exportation will automatically create an images directory (you can define the name of the directory it saves images to within ImageReady’s preferences). Export each individual slice as a separate image into the images directory, as well as generate the HTML table, or even a DHTML DIV layout (once again depending on your preferences).
Take it a Step Further…
Want to know how to put plain text on top of a slice? After exportation, open up the HTML code that Photoshop/ImageReady generated. Find the slice you wish to write plain text over. Now set the table’s <TD> background=" to the image SRC of our selected slice (example, layout_12.gif), also set width = to the same as the original image width and height= to the original image height (both displayed right in front of you within the <IMG> tag of slice 12). It’s also a good idea to set ‘valign=top’. Set this while still in the <TD>, and it will vertically align your text at the top. You can also set valign to bottom (for bottom vertical alignment), or nothing for center (or middle) vertical alignment. Then just simply input your text <TD> .*. > between here! <TD>, and delete the remaining <IMG> tag (with the original slice image name).
Now your flat HTML text will appear on top of your slice image. All we really did was take the slice image and rather then being an image convert it to the background image of the current table cell (<TD>).
One thing you need to keep in mind is that this is very basic, and if you overflow your area with more text than can fit; the background for this individual table cell will stretch, as well as all the other table cells on the same row… Either rework your text to fit within your boundaries, or stick around for my upcoming article which will go more into dealing with stretching backgrounds and mouseovers.
Slices have become a necessary method of designing Web sites, and to do it manually takes a great deal of time and precision, so instead use Photoshop or ImageReady to perform your slicing and exportation, and get to spend more time on more productive areas.
That about wraps it up! There is a lot of activity and jumping around taking place within this article (between Photoshop, ImageReady, and then into actual code), take your time, and explore your options; you may need to reference this article in the future, so now would be a good time to bookmark it! Any questions feel free to contact me at me@scotty.cc. Enjoy the Slices! Scotty
